---
title: Structure du projet
description: Une introduction à la structure de base des fichiers d'un projet Astro.
i18nReady: true
---
import { FileTree } from '@astrojs/starlight/components';

Votre nouveau projet Astro généré à partir de l'assistant CLI `create astro` inclut déjà quelques fichiers et dossiers. D'autres seront créés par vous-même et ajoutés à la structure existante d'Astro.

Voici comment un projet Astro est organisé, ainsi que quelques fichiers que vous trouverez dans votre nouveau projet.

## Répertoires et fichiers

Astro s'appuie sur une structure de dossier opiniâtre pour votre projet. La racine de chaque projet Astro doit inclure les répertoires et fichiers suivants :

- `src/*` - Le code source de votre projet (composants, pages, styles, images, etc.)
- `public/*` - Tout ce qui n'est pas du code et/ou des fichiers qui n'ont pas à être traités (polices d'écritures, icônes, etc.)
- `package.json` - Le manifeste de votre projet.
- `astro.config.mjs` - Un fichier de configuration d'Astro. (recommandé)
- `tsconfig.json` - Un fichier de configuration TypeScript. (recommandé)

### Exemple d'arborescence d'un projet

Un répertoire de projet Astro courant peut ressembler à ceci :

<FileTree>
- public/
  - robots.txt
  - favicon.svg
  - mon-cv.pdf
- src/
    - blog/
      - article1.md
      - article2.md
      - article3.md
  - components/
    - Header.astro
    - Button.jsx
  - images/
    - image1.jpg
    - image2.jpg
    - image3.jpg
  - layouts/
    - PostLayout.astro
  - pages/
    - articles/
      - [article].astro
    - a-propos.astro
    - **index.astro**
    - rss.xml.js
  - styles/
    - global.css
  - content.config.ts
- astro.config.mjs
- package.json
- tsconfig.json
</FileTree>

### `src/`

Le dossier `src/` est l'endroit où se trouve la majeure partie du code source de votre projet. Il comprend :

- [Des pages](/fr/basics/astro-pages/)
- [Des mises en page](/fr/basics/layouts/)
- [Des composants Astro](/fr/basics/astro-components/)
- [Des composants de framework UI (React, etc...)](/fr/guides/framework-components/)
- [Des fichiers de style (CSS, Sass)](/fr/guides/styling/)
- [Du Markdown](/fr/guides/markdown-content/)
- [Des images à optimiser et à traiter par Astro](/fr/guides/images/)

Astro traite, optimise et regroupe les fichiers placés dans votre dossier `src/` pour créer le site web final qui est livré au navigateur. Contrairement au répertoire statique `public/`, les fichiers dans `src/` sont traités et gérés pour vous par Astro.

Certains fichiers (comme les composants Astro) ne sont pas envoyés au navigateur tels qu'ils sont écrits, mais sont rendus en HTML statique. D'autres fichiers (CSS par exemple) sont envoyés au navigateur, mais peuvent être optimisés ou regroupés avec d'autres fichiers CSS pour améliorer les performances.

:::tip
Bien que ce guide décrive quelques conventions populaires utilisées dans la communauté Astro, le seul répertoire réservé par Astro est `src/pages/`. Vous êtes libre de renommer et de réorganiser les autres répertoires de la manière qui vous convient le mieux.
:::

### `src/pages`

Les routes de pages sont créées pour votre site en ajoutant des [types de fichiers](/fr/basics/astro-pages/#fichiers-de-page-pris-en-charge) pris en charge à ce répertoire.

:::caution
`src/pages` est un sous-répertoire **obligatoire** dans votre projet Astro. Sans lui, votre site n'aura ni pages ni routes !
:::

### `src/components`

**Les composants** sont, généralement, du code réutilisable pour vos pages HTML. Ils peuvent être des [composants Astro](/fr/basics/astro-components/), ou des [composants d'interface utilisateur de framework](/fr/guides/framework-components/) comme React ou Vue. Il est commun de regrouper et d'organiser tous les composants de votre projet dans ce dossier.

C'est une convention courante dans les projets Astro, mais elle n'est pas obligatoire. N'hésitez pas à organiser vos composants comme vous le souhaitez !

### `src/layouts`

Les [mises en page](/fr/basics/layouts/) sont des composants Astro qui définissent la structure de l'interface partagée par une ou plusieurs [pages](/fr/basics/astro-pages/).

Tout comme `src/components`, ce répertoire est une convention courante mais n'est pas obligatoire.

### `src/styles`

Il est courant de stocker vos fichiers CSS ou Sass dans un répertoire `src/styles`, mais ce n'est pas obligatoire. Tant que vos styles se trouvent quelque part dans le répertoire `src/` et qu'ils sont importés correctement, Astro les gérera et les optimisera.

### `public/`

Le dossier `public/` contient les fichiers et les ressources qui n'ont pas besoin d'être traités pendant le processus de compilation d'Astro. Les fichiers de ce répertoire seront copiés dans le répertoire de sortie sans être modifiés, puis votre site sera créé.

Ce comportement fait du dossier `public/` un endroit idéal pour les ressources communes qui ne nécessitent aucun traitement, comme certaines images et polices, ou des fichiers spéciaux tels que `robots.txt` et `manifest.webmanifest`.

Vous pouvez placer des fichiers CSS et JavaScript dans le dossier `public/`, mais gardez à l'esprit que ces fichiers ne seront pas regroupés ou optimisés dans votre construction final.

:::tip
En règle générale, tout CSS ou JavaScript que vous écrivez vous-même devrait se trouver dans votre dossier `src/`.
:::

### `package.json`

C'est un fichier utilisé par les gestionnaires de paquets JavaScript pour gérer vos dépendances. Il définit également les scripts qui sont utilisés pour exécuter Astro (p. ex. : `npm run dev`, `npm run build`).

Il existe [deux types de dépendances](https://docs.npmjs.com/specifying-dependencies-and-devdependencies-in-a-package-json-file) que vous pouvez spécifier dans le fichier `package.json` : `dependencies` et `devDependencies`. Dans la plupart des cas, elles fonctionnent de la même manière : Astro a besoin de toutes les dépendances au moment de la compilation, et votre gestionnaire de paquets les installera toutes les deux. Nous recommandons de mettre toutes vos dépendances dans `dependencies` pour commencer, et de n'utiliser `devDependencies` que si vous avez un besoin spécifique.

Pour obtenir de l'aide sur la création d'un nouveau fichier `package.json` pour votre projet, consultez les instructions de [configuration manuelle](/fr/install-and-setup/#configuration-manuelle).

### `astro.config.mjs`

Ce fichier est généré dans chaque modèle de démarrage et contient des options de configuration pour votre projet Astro. Ici, vous pouvez spécifier les intégrations à utiliser, les options de compilation, les options du serveur, et plus encore.

Astro prend en charge plusieurs formats de fichiers pour son fichier de configuration JavaScript : `astro.config.js`, `astro.config.mjs`, `astro.config.cjs` et `astro.config.ts`. Nous vous recommandons d'utiliser `.mjs` dans la plupart des cas ou `.ts` si vous souhaitez utiliser TypeScript dans votre fichier de configuration.

Le chargement du fichier de configuration TypeScript est géré à l'aide de [`tsm`](https://github.com/lukeed/tsm) et respectera les options `tsconfig` de votre projet.

Consultez la [référence de configuration](/fr/reference/configuration-reference/) pour plus d'informations.

### `tsconfig.json`

Ce fichier est généré dans chaque modèle de démarrage et comprend des options de configuration TypeScript pour votre projet Astro. Certaines fonctionnalités (comme les importations de paquets npm) ne sont pas entièrement prises en charge dans l'éditeur sans un fichier `tsconfig.json`.

Consultez le [guide TypeScript](/fr/guides/typescript/) pour plus de détails sur le paramétrage des configurations.
